<template>
	<view class="goodDetail">
		<u-icon top="10px"  size="25" class="clo" name="close" @click="chageClose"></u-icon>
		<view class="_image">
			<image :src="list.goodImg"></image>
			<view class="_text">
				<view class="span">￥<text>{{sum}}</text>.00</view>
				<view class="p" >
					<text  v-show="shop.trim().length == 0">未选择</text>
					<text v-show="shop.trim().length != 0">已选</text>
					<view class="sname" v-if="shop.trim() != ''">
						<text>{{shop}}</text>，{{value}}个
						</view>
				</view>
			</view>
		</view>
		<view class="h3">
			颜色
		</view>
		<view class="_ul" @touch.stop>
			<view class="_li"  v-for="(item,index) in list.goodquaList" :key="index">
				<u-button  type="default" @click="btn(item.val)" :disabled="item.issock" :class="[shop == item.val?'btu':'',item.issock==true?'_text':'']"
				 shape="circle"  :plain="true">{{item.val}}</u-button>
			</view>
		</view>
		<view class="nbox">
			<view class="h2">数量</view>
			<u-number-box v-model="value" :disabled="shop.trim()== ''?true:false" @change="valChange"></u-number-box>
		</view>
		<view class="buttom">
			<u-button type="default"  shape="circle"  @click="add()">确认</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"good-detail",
		data() {
			return {
				value: 1,
				show:false,
				shop:'',
			}
		},
		props:{
			list:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		computed:{
			sum(){
				let sum = 0;
				console.log(this.list);
				if(Object.keys(this.list).length == 0){
					return sum;
				}
				if(this.shop.trim() == ''){
					return sum;
				}
				let m = this.list.goodquaList.find(item => item.val == this.shop);
				// console.log(m);
				if(m.price == 0){
					sum = this.list.goodPrice*this.value;
				}else{
					sum = m.price*this.value;
				}
				// console.log(sum);
				return sum;
			}
		},
		methods:{
			valChange(e) {
				console.log('当前值为: ' + e.value)
				this.value = e.value;
				this.$emit('addShop',{type:this.shop,num:this.value});
			},
			chageClose(){
				this.$emit('closeT',this.show);
			},
			btn(e){
				console.log(e);
				this.shop = e;
			},
			add(){
				if(this.shop.trim() == ''){
					uni.showToast({
						icon:'error',
						title:'请选择'
					})
					return;
				}
				this.$emit('addGood',{type:this.shop,num:this.value});
				this.chageClose();
			}
		}
	}
</script>

<style lang="scss">
	.goodDetail{
		width: 100%;
		height: 500px;
		background-color: white;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		// padding: 50px;
		.clo{
			position: fixed;
			right: 10px;
		}
		._image{
			width: 100%;
			padding: 25px;
			display: flex;
			._text{
				margin-left: 10px;
				font-size: 12px;
				 .span{
					margin-top: 55px;
					color: red;
					height: 30px;
					line-height: 30px;
				}
				 .span text{
					font-size: 20px;
					font-weight: bold;
				}
				.p{
					height: 30px;
					line-height: 30px;
					display: flex;
				}
				.p text:nth-child(1){
					margin-right: 10px;
					color: gray;
				}
				.p .sname{
					width: 200px;
					display: flex;
				}
				.p .sname text{
					display: block;
					width: 70px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
		._image image{
			width: 120px;
			height: 120px;
			border: 1px solid gray;
		}
		.h3{
			font-size: 22px;
			font-weight: bold;
			margin-left: 20px;
			height: 30px;
			line-height: 30px;
		}
		._ul{
			width: 90%;
			margin: 10px auto;
			flex-wrap: wrap;
			display: flex;
			overflow: scroll;
			height: 150px;
			._li{
				height: 30px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
			._li button{
				color: gray;
				height: 30px;
				line-height: 30px;
				font-size: 13px;
				border: 1px solid gray;
				background-color: gainsboro;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				&.btu {
					color: red;
					border: 1px solid red;
				}
				&._text{
					text-decoration: line-through;
					color: black;
				}
			}
		}
		.nbox{
			display: flex;
			width: 90%;
			height: 40px;
			line-height: 40px;
			margin: 0 auto;
			justify-content: space-between;
			.h2{
				font-size: 22px;
				font-weight: bold;
			}
		}
		.buttom{
			width: 90%;
			margin: 20px auto;
		}
		.buttom button{
			font-size: 15px;
			background-color: #fa3534;
			color: white;
		}
	}
</style>